import View360, { ControlBar } from "@site/src/components/View360";
import OptionDescriptor from "@site/src/components/OptionDescriptor";

<OptionDescriptor type="boolean | ControlBarItemOptions" defaultVal="true" added="4.0.0" />

풀스크린 진입 / 해제 버튼을 표시합니다.
`true`일 경우 기본값을 적용하고, `false`일 경우 표시하지 않습니다.
세부 옵션도 설정 가능합니다. [ControlBarItemOptions](/docs/api/Plugin/Interface/ControlBarItemOptions)를 확인해보세요.

:::caution
iOS와 같이 fullscreen API가 지원되지 않는 환경에서는 풀스크린 아이콘이 표시되지 않을 수 있습니다.
이 경우, Polyfill 등을 이용해서 Fullscreen API를 지원하도록 만드셔야 합니다.
:::

## 예시
아래는 버튼을 표시하지 않는 예시입니다.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ fullscreenButton: false }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  fullscreenButton: false
})
```

아래는 버튼을 다른 위치에 표시하는 예시입니다.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ fullscreenButton: {
    position: ControlBar.POSITION.TOP_RIGHT,
    order: 0
  } }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  fullscreenButton: {
    position: ControlBar.POSITION.TOP_RIGHT,
    order: 0
  }
})
```
